<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>Hex Terrain</title>

<style>
	
#areaX{
	position:relative;
	margin:auto;
	height:10px;
	width:10px;
	background-color:#f90;
	border:5px solid #060;
	overflow:hidden;
}

#notes{
	width:400px;
	padding:10px;
	border:1px solid #000;
	margin:auto;
}

.X{
	color:#888;
}
.X:hover{
	color:#fa0;
}

input{
	color:#fa0;
	font-size:20px;
	width:50px;
	background-color:#c30;
}

img{
	position:absolute;
	height:200px;
	width:200px;
}

</style>

</head>
<body>
<p style="height:70px;"/>

<div id="areaX"></div> 
<div id="notes"></div>




<script type="text/javascript">

//////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////

var hexMig   = 'hexImage.png';
var hexRad   = 100;
var max      = 8;//max speed

//////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////

var root3 = 1.732051;

var areaX    = document.getElementById('areaX');
var notes    = document.getElementById('notes');

var screenH  = Math.round((3*hexRad));
var screenW  = Math.round(3*root3*hexRad); 
var screenH2 = Math.round(screenH/2);
var screenW2 = Math.round(screenW/2);
var screenL  = areaX.offsetLeft;
var screenT  = areaX.offsetTop;
var migSize  = hexRad*2;
var horz_shift_top=Math.round(root3*hexRad/2);
var vert_shift_top=Math.round(9*hexRad/2);
var horz_shift_mid=Math.round(5*root3*hexRad/2);
var vert_shift_mid=Math.round(3*hexRad/2);




areaX.style.height = screenH +'px';
areaX.style.width  = screenW +'px';


var pos = [

 [(screenW2 - Math.round((root3/2)*hexRad)) - hexRad,(screenH2 - Math.round(1.5*hexRad)) - hexRad],

 [(screenW2 + Math.round((root3/2)*hexRad)) - hexRad,(screenH2 - Math.round(1.5*hexRad)) - hexRad],

 [(screenW2 - root3*hexRad) - hexRad ,screenH2 - hexRad],

 [(screenW2 - hexRad),(screenH2 - hexRad)],
 [(screenW2 + root3*hexRad) - hexRad ,screenH2 - hexRad],
 [(screenW2 - Math.round((root3/2)*hexRad)) - hexRad,(screenH2 + Math.round(1.5*hexRad)) - hexRad],
 [(screenW2 + Math.round((root3/2)*hexRad)) - hexRad,(screenH2 + Math.round(1.5*hexRad)) - hexRad]
];


var migs = new Array(7);

for(var i=0;i<migs.length;i++){

	migs[i] = new Image(migSize,migSize);
	migs[i].src = hexMig;
	migs[i].style.height = migSize +'px';
	migs[i].style.width  = migSize +'px';
	migs[i].style.left = pos[i][0] + 'px';
	migs[i].style.top  = pos[i][1] +'px';
	migs[i].startPos = pos[i];
	areaX.appendChild(migs[i]);
	

}

var isFlying	= false;
var clickPoint	= [0,0];
var speed 	= [0,0];

var removeCount = 0;

var calcSpeed = function(e){if(isFlying){

	var tmpX = parseInt((clickPoint[0] - e.pageX)/10);
	var tmpY = parseInt((clickPoint[1] - e.pageY)/10);
	speed[0] = (tmpX > max) ? max : (tmpX < -max) ? -max : tmpX;
	speed[1] = (tmpY > max) ? max : (tmpY < -max) ? -max : tmpY;

}};

var fly = function(){if(isFlying){

	var moveIt =false;
	var maxLeft=screenW;
	var maxRight=0;
	var indx_lf=0;
	var indx_rt=0;
	X = speed + '<br>';
	X += removeCount++;
	notes.innerHTML = X;
	var sgn=0;
	for(var i=0;i<migs.length;i++){
		var tmpLeft = parseInt(migs[i].style.left) + 5*speed[0];
		var tmpTop  = parseInt(migs[i].style.top ) + 5*speed[1];
		if(tmpLeft > screenW - hexRad){tmpLeft = Math.round(tmpLeft-3*root3*hexRad);}
		else if(tmpLeft < -hexRad){tmpLeft = Math.round(tmpLeft+3*root3*hexRad);}
		var diff=migs[i].startPos[0]-tmpLeft;
		sgn=(diff<0)?-1:1;
		if(maxLeft > tmpLeft ){
			maxLeft=tmpLeft;
			indx_lf=i;
		}
		if(maxRight < tmpLeft){
			maxRight=tmpLeft;
			indx_rt=i;
		}
		if(tmpTop > screenH){
			var diff=migs[i].startPos[0]-tmpLeft;
			sgn=(diff<0)?-1:1;
			tmpTop = tmpTop - vert_shift_top;
			tmpLeft=tmpLeft + sgn*horz_shift_top;
			moveIt=true;}

		else if(tmpTop < -migSize){
			var diff=migs[i].startPos[0]-tmpLeft;
			sgn=(diff<0)?-1:1;
			tmpTop = tmpTop + vert_shift_top;
			tmpLeft=tmpLeft + sgn*horz_shift_top;
			moveIt=true;}

		migs[i].style.left = tmpLeft +'px';
		migs[i].style.top  = tmpTop  +'px';
	}
	if(moveIt){
		if(sgn<0){
			migs[indx_rt].style.left= parseInt(migs[indx_rt].style.left) + sgn*horz_shift_mid + 'px';
			migs[indx_rt].style.top= parseInt(migs[indx_rt].style.top) - sgn*vert_shift_mid + 'px';
	}
		else{
			migs[indx_lf].style.left= parseInt(migs[indx_lf].style.left) + sgn*horz_shift_mid + 'px';
			migs[indx_lf].style.top= parseInt(migs[indx_lf].style.top) + sgn*vert_shift_mid + 'px';
	}
	}
	moveIt=false;
	indx_rt=indx_lf=0;
	setTimeout(fly,100);

}};

var toggleFly = function(e){
	if(isFlying){
		isFlying = false;
		removeCount = 0;
		areaX.style.borderColor = '#030';
	}else{
		isFlying = true; 
		areaX.style.borderColor = '#f90';
		clickPoint = [e.pageX,e.pageY];
		calcSpeed(e);
		fly();
	}
};

if(document.addEventListener){
   document.addEventListener('mousedown',toggleFly,false);
   document.addEventListener('mousemove',calcSpeed,  false);
}else{document.attachEvent('onmousedown',toggleFly,false);
      document.attachEvent('onmousemove',calcSpeed,  false);
}

var centerDot = new Image();
centerDot.src = 'about:logo';
centerDot.style.height = '20px';
centerDot.style.width  = '20px';
centerDot.style.position = 'absolute';
centerDot.style.left = screenW2 - 10 +'px';
centerDot.style.top  = screenH2 - 10 +'px';
areaX.appendChild(centerDot);




</script>
</body>
</html>
